<template>
  <view class="works-jump-it">
    <view class="item" v-if="props.info.eventsId" :class="props.type" @click="gotoPage(`/events/eventsDetail?id=${props.info.eventsId}`)">
      <view class="left">
        <img src="https://img.qumoyugo.com/img/55UWWZ7VA3L633DZ28U8R1712822403936.png" class="img">
      </view>
      <view class="middle">
        <view class="u-line-1">
          {{props.info.eventsName}}
        </view>
      </view>
      <view class="right">
        <img :src="props.type === 'gray' ? 'https://img.qumoyugo.com/img/QST38BNZC96XDU97PR9X1712821083278.png' : 'https://img.qumoyugo.com/img/96E6LKOHHEM8S8FY5YQM1712820975309.png'" style="width: 24rpx;height:24rpx">
      </view>
    </view>
    <view class="item" :class="props.type" @click="gotoPage(`/user/petHome?userId=${props.info.customerId}&petId=${props.info.petId}`)" v-if="props.info.petId">
      <view class="left">
        <img src="https://img.qumoyugo.com/img/OD8G7GNVLLRM3M8XSBJWW1712822403925.png" class="img">
      </view>
      <view class="middle">
        <view class="u-line-1">
          爱宠：{{props.info.petName}}
        </view>
      </view>
      <img :src="props.info.petFace" class="avater">
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'gray'
  },
  info: {
    type: Object,
    required: true
  }
})
const gotoPage = (url) => {
  uni.navigateTo({
    url
  })
}
</script>

<style scoped lang="scss">
.works-jump-it{
  .item{
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    font-size: 26rpx;
    font-weight: bold;
    border-radius: 14rpx;
    height: 74rpx;
  }
  .gray{
    background: #F1F1F1;
    color: #414141;
  }
  .black{
    background: rgba(255,255,255,0.2);
    color: #fff;
  }
  .left{
    width: 36rpx;
    height: 36rpx;
  }
  .middle{
    flex: 1;
    padding: 0 20rpx;
    overflow: hidden;
  }
  .avater{
    width: 60rpx;
    height: 60rpx;
    border-radius: 16rpx;
  }
  .img{
    width: 100%;
    height: 100%;
  }
}
</style>
